<template>
	<view class="doctor-wrap" :style="type == 0 ? 'background-color: #f9f7ff;margin-bottom:20rpx' : ''" @click.stop="onClick">
		<view class="doctor-section-img"><image :src="data.pictureUrl" mode="aspectFill" @click.stop="previewImage([data.pictureUrl], 0)"></image></view>

		<view class="doctor-section-info">
			<view class="doctor-layer1">
				<view class="doctor-layer1-box">
					<view class="doctor-layer1-word2">{{ data.doctorName }}</view>
					<view class="doctor-layer1-word3">{{ jobGradeConfig[data.jobGrade] }}</view>
				</view>
				<view class="doctor-layer1-word4">{{ data.hospitalName }}&nbsp;&nbsp;{{ data.departmentName }}</view>
			</view>

			<view v-if="type == 0">
				<view class="doctor-layer2 nowrap">擅长：{{ data.goodDirection }}</view>

				<view class="doctor-layer3" v-if="showNumber">
					<view class="doctor-layer3-left">
						<text lines="1" class="word6">好评率：</text>
						<text lines="1" class="info2">{{ data.goodRate ? data.goodRate : 0 }}%</text>
					</view>
					<view class="doctor-layer3-right">
						<text lines="1" class="txt3">咨询量：</text>
						<text lines="1" class="word7">{{ data.advisoryNum }}</text>
					</view>
				</view>

				<view class="doctor-layer4" v-if="showBtn" @click.stop="gotoRouter('/pages-client/inquiry/inquirySelect?doctorId=' + data.id + '&type=0')">
					<view class="doctor-layer4-price" v-if="showNumber">¥&nbsp;{{ data.chargeAmount }}&nbsp;/&nbsp;{{ data.videoAmount }}</view>
					<view class="doctor-layer4-btn">咨询医生</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	props: {
		data: {
			type: Object,
			default() {
				return {};
			}
		},
		type: {
			type: Number,
			default: 0
		},

		showBtn: {
			type: Boolean,
			default: true
		},

		showNumber: {
			type: Boolean,
			default: false
		}
	},
	data() {
		return {};
	},
	onLoad(option) {},
	onShow() {},
	methods: {
		onClick() {
			this.$emit('click');
		}
	}
};
</script>

<style lang="less">
.doctor-wrap {
	padding: 20rpx;
	width: 627rpx;
	border-radius: 8rpx;

	box-sizing: border-box;
	display: flex;
	.doctor-section-img {
		width: 120rpx;
		height: 120rpx;
		border-radius: 50%;
		margin-right: 20rpx;
		> image {
			width: 120rpx;
			height: 120rpx;
			border-radius: 50%;
		}
	}

	.doctor-section-info {
		.doctor-layer1 {
			.doctor-layer1-box {
				display: flex;
				align-items: center;
				.doctor-layer1-word2 {
					color: rgba(51, 51, 51, 1);
					font-size: 28rpx;
					font-family: PingFangSC-Medium;
				}

				.doctor-layer1-word3 {
					color: rgba(51, 51, 51, 1);
					font-size: 24rpx;
					font-family: PingFangSC-Regular;
					margin-left: 20rpx;
				}
			}

			.doctor-layer1-word4 {
				color: rgba(153, 153, 153, 1);
				font-size: 24rpx;
				font-family: PingFangSC-Regular;
				margin: 10rpx 0;
			}
		}

		.doctor-layer2 {
			z-index: auto;
			width: 444rpx;
			font-size: 24rpx;
			font-family: PingFangSC-Regular;
			color: rgba(153, 153, 153, 1);
		}

		.doctor-layer3 {
			display: flex;
			margin: 10rpx 0 0;
			.doctor-layer3-left {
				display: flex;
				.word6 {
					font-size: 24rpx;
					font-family: PingFangSC-Regular;
					color: rgba(153, 153, 153, 1);
				}

				.info2 {
					font-size: 24rpx;
					font-family: PingFangSC-Medium;
					color: rgba(255, 65, 65, 1);
				}
			}

			.doctor-layer3-right {
				margin-left: 30rpx;
				.txt3 {
					font-size: 24rpx;
					font-family: PingFangSC-Regular;
					color: rgba(153, 153, 153, 1);
				}

				.word7 {
					font-size: 24rpx;
					font-family: PingFangSC-Medium;
					color: rgba(128, 108, 255, 1);
				}
			}
		}

		.doctor-layer4 {
			display: flex;
			justify-content: space-between;
			margin-top: 10rpx;
			// margin-bottom: 20rpx;
			// padding-bottom: 20rpx;
		}

		.doctor-layer4-price {
			color: rgba(128, 108, 255, 1);
			font-size: 32rpx;
			font-family: PingFangSC-Medium;
		}

		.doctor-layer4-btn {
			margin-left: auto;
			height: 40rpx;
			border-radius: 20rpx;
			border: 1rpx solid rgba(128, 108, 255, 1);
			width: 136rpx;
			justify-content: center;
			align-items: center;
			display: flex;
			color: rgba(128, 108, 255, 1);
			font-size: 24rpx;
			font-family: PingFangSC-Medium;
		}
	}
}
</style>
